<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
		<link rel='stylesheet' href='css/main2.css' type='text/css'>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		
	</head>

	<body>
		<div data-role="page"  data-theme="b">
			
			<header data-tap-toggle="false" data-position="fixed" data-role="header" role="banner">
				
				<a href="#menuPanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>
				
				<h1 id="centerheader">
				</h1>
				<h5>${sessionScope.userLoginInfo.name}님 환영합니다.</h5>
				<a href="#rightpanel" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">Grid</a>
				
			</header>
							
			
			
			<section id="menuPanel" data-display="overlay" data-position-fixed="true" data-role="panel"  data-theme="b">
			
			</section>	
			
			
					
			<div data-role="panel" id="rightpanel" data-display="overlay" data-position="right" data-theme="b">	
				<div id="MessengerGroupDiv"></div>
				
				<div id="MessengerMember" data-role="controlgroup" data-type="horizontal" data-mini="true"></div>
			</div>
			

			<form>
				<input type="hidden" id="mydepartCode" value=${sessionScope.userLoginInfo.departCode}>
			</form>
			
			<script>
				
				function MessengerMember(){
					console.log($("#MessengerGroup option:selected").val());
					$.get('messegerGetter',{"departCode" : $("#MessengerGroup option:selected").val()}).done(function (data){
						
						console.log(data);
						
						var innerMember = "";
						
						for(var i = 0 ; i< data.length; i++ ){
							
							innerMember += "<p>";
							innerMember += "<a>" + data[i].epName + "</a>";
							innerMember += "<a data-role='button' data-iconpos='notext' data-theme='c' data-inline='true' data-icon='edit'></a>";
							innerMember += "<a data-role='button' data-iconpos='notext' data-theme='c' data-inline='true'  data-icon='search'></a>";
							innerMember += "<a data-role='button' data-iconpos='notext' data-theme='c' data-inline='true'  data-icon='info'></a>";
							innerMember += "</p>";
						}
						
						console.log(innerMember);
						
						$('#MessengerMember').html(innerMember).trigger("create");
						
					});
					
				}
				
				
				function MessengerGroup(){
					
					console.log("MessengerGroup..................");
					
					$.get('messegerGroup',{}).done(function(data){
						
						var innerGroup = "<select name='MessengerGroup' id='MessengerGroup' data-native-menu='false'>";
						innerGroup += "<option>부 서 선 택</option>";
						
						for(var i= 0; i < data.length; i++){
							
						    innerGroup += "<option value=" + data[i].departCode;
						 	
						  	if(data[i].departCode == $('#mydepartCode').val()){
						  		
						  		innerGroup += " selected = 'selected' >"
						  		
						  	}else{
						  		innerGroup += " >";
						  	}
						   	
						  	innerGroup += data[i].departName + "</option>";
						}
						
						innerGroup += "</select>";
						innerGroup +="<p><a id='departChoice' data-role='button' data-mini='true' data-inline='true'>부서 검색</a></p>";
						
						$('#MessengerGroupDiv').html(innerGroup).trigger("create");
						
						
					});
					
				}
				
				$('#MessengerGroupDiv').delegate("a", "click", function() {
					
					MessengerMember();
					
				});

				
				MessengerGroup();
				
				MessengerMember();
			
			</script>
			
		</div>	
	</body>
</html>